<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <template #title>
        <div style="font-size: 1.5em; text-align: center">
          {{ acceptor.nickname }}
        </div>
      </template>
      <div class="msg-container" ref="containerRef">
        <template v-for="msg in msgList" :key="msg.msgId">
          <div v-if="msg.senderUsername == acceptor.username" class="msg-left">
            <img :src="acceptor.avatarUrl" class="avatar" />
            <div style="margin-left: 15px; max-width: 65%">
              <div class="send-time">{{ msg.sendTime }}</div>
              <div class="send">{{ msg.content }}</div>
            </div>
          </div>

          <div v-else class="msg-right">
            <div style="margin-right: 15px; max-width: 65%">
              <div class="send-time">{{ msg.sendTime }}</div>
              <div class="send">{{ msg.content }}</div>
            </div>
            <img :src="sender.avatarUrl" class="avatar" />
          </div>
        </template>
      </div>

      <template #footer>
        <div style="display: flex">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            @keyup.enter="sendMsg"
          ></el-input>
          <el-button type="primary" @click="sendMsg">发送</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { dateToChatTime } from "../utils/dateTimeToStupid";
import mitter from "../plugins/mitter";
import dayjs from "dayjs";
export default {
  data() {
    return {
      dialogVisible: false,
      acceptor: {},
      sender: {},
      msgList: [],
      avatarUrl: "",
      input: "",
      containerRef: "",
    };
  },
  created() {
    mitter.on("showChatDialog", (payload) => {
      this.msgList = [];
      this.acceptor = payload;
      this.sender.avatarUrl = localStorage.getItem("avatarUrl");
      this.sender.username = sessionStorage.getItem("username");
      this.dialogVisible = true;
      const data = {
        acceptorUsername: this.acceptor.username,
        senderUsername: this.sender.username,
      };
      this.axios({
        method: "GET",
        url: "/msg/two-user-record",
        params: data,
      }).then((res) => {
        this.msgList = res.data.data;
        this.msgList.forEach((msg) => {
          msg.sendTime = dateToChatTime(msg.sendTime);
        });
      });
    });
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    sendMsg() {
      const data = {
        acceptorUsername: this.acceptor.username,
        senderUsername: this.sender.username,
        content: this.input,
      };
      const msg = {
        acceptorUsername: this.acceptor.username,
        senderUsername: this.sender.username,
        sendTime: dateToChatTime(dayjs().format("YYYY-MM-DD HH:mm:ss")),
        content: this.input,
      };
      this.input = "";
      this.axios.post("/msg/send-msg", data);
      this.msgList.push(msg);
    },
  },
  watch: {
    "msgList.length": function () {
      setTimeout(() => {
        this.$refs.containerRef.scrollTop =
          this.$refs.containerRef.scrollHeight;
      }, 50);
    },
  },
};
</script>

<style>
.msg-left {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.msg-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 20px 0;
  text-align: right;
}
.avatar {
  width: 50px;
  height: 50px;
  border-radius: 40px;
}
.el-dialog {
  width: 650px !important;
  border-radius: 20px !important;
}
.msg-row {
  max-width: 80%;
}
.send {
  display: inline-block;
  padding: 0.6em;
  background: #dddddd;
  border-radius: 5px;
  text-align: left;
}
.msg-container {
  height: 400px;
  padding: 10px;
  overflow-y: auto;
}
.send-time {
  font-size: 0.8em;
  padding: 0.3em;
}
</style>